<template>
  <div>
    <!-- 设置 -->
    <!-- 头部 -->
    <div id="mine">

      <router-link to="/mypage">
         <van-nav-bar title="设置" left-arrow fixed class="van-nav-bar"/>
      </router-link>
    </div>
    <!-- 内容中部 -->
    <div class="middle">
        <router-link to="/personal">
          <van-cell title="用户名" is-link/>
        </router-link>
         <van-cell title="我的地址" is-link/>
         <van-cell title="清除缓存" is-link value="9.06M"/>
         <van-cell title="我的二维码" is-link/>
         <van-cell title="关于" is-link/>
         <van-cell title="服务协议" is-link/>
         <van-cell title="隐私权政策" is-link/>
         <van-cell title="消息通知" is-link/>
         <van-cell title="检查更新" is-link value="3.66"/>
    </div>

    <van-button type="primary" size="large" class="btnout" @click="exitLogin">退出登录</van-button>
  </div>
</template>

<script>

export default {
  data(){
    return{
      uid:'',
      phone:''
    }
  },
   methods:{
       exitLogin(){
        // 当退出登录后，调用store下index.js中的mutations下的logout方法，修改登录状态，重新渲染页面
        this.$store.commit('logout',this.uid,this.phone);
        // 把islogin、uid和phone存到sessionStorage
        sessionStorage.setItem('token','');
        sessionStorage.setItem('islogin',false);
        sessionStorage.setItem('uid',this.uid);
        sessionStorage.setItem('phone',this.phone);
        this.$router.push('/login');
       }
   }
}
</script>


<style scoped>
    #mine /deep/ .van-nav-bar__title,
    #mine /deep/ .van-icon {
    color: white !important;
    }
    .van-nav-bar {
    background-color: rgba(88, 133, 185)
    }
    .btnout{
        border-radius: 5px;
        width: 80%;
        display: block;
        margin: 0 auto;
        height: 40px;
        margin-top: 50px;
        background-color: #1989fa;
        border: 1px solid #1989fa;
    }
    .middle{
        margin-top: 50px;
    }
</style>